<template>
  <el-dialog
    title="签章"
    :close-on-click-modal="false"
    append-to-body
    :visible.sync="visible"
    lock-scroll
    width="600px"
    class="dioSty"
  >
    <div>
      <el-row :gutter="20" v-if="rowState">
        <el-col :span="19" :offset="3">
          <div class="hinAllSty">
            <el-empty
              description="暂无印章"
              style="width: 100%"
              v-if="cachetList.length < 1"
            />
            <!-- :class="{ 'activeHinSty': signState == item.id || item.defaultSign }" -->
            <div
              class="hinStyAll"
              v-for="item in cachetList"
              :key="item.id"
              :class="cachetState == item.id ? 'activeHinSty' : ''"
              @click="cutHinState(item)"
              v-else
            >
              <ImagePreview
                :src="item.signUrl"
                :width="80"
                :height="40"
                :listState="false"
              />
              <!-- <div>{{ item.name }}</div> -->
              <el-tooltip effect="dark" placement="bottom">
                <div slot="content" style="width: 10rem">{{ item.name }}</div>
                <div class="ellipsisList">{{ item.name }}</div>
              </el-tooltip>
            </div>
          </div>
        </el-col>
        <el-col :span="21" :offset="2">
          <div class="hintSty">请用APP扫描二维码 进行签名 ,或者选择预存签名图</div>
        </el-col>
        <el-col :span="18" :offset="4">
          <div class="qrCodeSty">
            <div id="qrCode" ref="qrCode"></div>
          </div>
        </el-col>
        <el-col :span="21" :offset="18">
          <el-button type="primary" @click="cutRowState">选择签名</el-button>
        </el-col>
      </el-row>

      <!-- 选择签名 -->
      <el-row :gutter="20" v-else>
        <el-col :span="19" :offset="2">
          <div class="signAllSty">
            <!-- || item.cc -->
            <el-empty
              description="暂无签名"
              style="width: 100%"
              v-if="signList.length < 1"
            />
            <!-- :class="{ 'activeHinSty': signState == item.id || item.defaultSign }" -->
            <div
              class="signStyAll"
              v-for="item in signList"
              :key="item.id"
              :class="signState == item.id ? 'activeHinSty' : ''"
              @click="cutSignState(item)"
              v-else
            >
              <ImagePreview
                :src="item.signUrl"
                :width="100"
                :height="100"
                :listState="false"
              />
              <el-tooltip class="item" effect="dark" placement="bottom">
                <div slot="content" style="width: 10rem">{{ item.name }}</div>
                <div class="ellipsisList">{{ item.name }}</div>
              </el-tooltip>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="21" :offset="1">
          <el-button
            style="width: 100%; margin-top: 20px"
            @click="rowState ? getList() : cutRowState()"
            >刷新</el-button
          >
        </el-col>
        <el-col :span="21" :offset="1">
          <el-button type="primary" style="width: 100%; margin-top: 20px" @click="subDio"
            >确定</el-button
          >
        </el-col>
        <el-col :span="21" :offset="1">
          <el-button style="width: 100%; margin-top: 20px" @click="cancelDio"
            >取消</el-button
          >
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>
<script>
import QRCode from "qrcodejs2";
import { getContractSignList } from "@/api/qrCode";
import { getInfo } from "@/api/login.js";
export default {
  data() {
    return {
      visible: false,
      detailVisible: false,
      loading: false,
      dataForm: {},
      facilityOptions: [],
      projectId: "", // 项目id
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      cachetList: [],
      signList: [],
      rowState: true,
      // 签章
      cachetState: 1,
      serviceOrgStamp: "",
      // 签名
      signState: 1,
      serviceOrgSign: "",
      contractId: "",
      projectId: "",
    };
  },
  methods: {
    init(contractId, projectId) {
      this.visible = true;
      this.rowState = true;
      this.contractId = contractId;
      this.projectId = projectId;
      this.projectId = projectId;
      this.$nextTick(() => {
        // 公章
        this.getList();
        getInfo().then((res) => {
          let text = {
            userId: res.user.userId,
            userType: res.user.userType,
            contractId,
            app: "fire",
            page: "contract",
          };
          this.$refs.qrCode.innerHTML = "";
          let qrcode = new QRCode(this.$refs.qrCode, {
            width: 255,
            height: 255, // 高度
            text: JSON.stringify(text),
            correctLevel: QRCode.CorrectLevel.H, //容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
          });
          qrcode._el.title = "";
        });
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    cutHinState(row) {
      // 服务机构印章图片地址
      this.serviceOrgStamp = row.signUrl;
      this.cachetState = row.id;
    },
    // 公章列表
    getList() {
      getContractSignList({ projectId: this.projectId, type: 2 }).then((res) => {
        for (let i = 0; i < res.rows.length; i++) {
          if (res.rows[i].defaultSign) {
            this.serviceOrgStamp = res.rows[i].signUrl;
            this.cachetState = res.rows[i].id;
          }
        }
        this.cachetList = res.rows;
      });
    },
    cutSignState(row) {
      // 服务机构签字图片地址
      this.serviceOrgSign = row.signUrl;
      this.signState = row.id;
    },
    cutRowState() {
      if (!this.serviceOrgStamp) {
        this.$modal.msgWarning("请选择印章");
      } else {
        // 签名
        getContractSignList({ projectId: this.projectId, type: 1 }).then((res) => {
          for (let i = 0; i < res.rows.length; i++) {
            if (res.rows[i].defaultSign) {
              this.serviceOrgSign = res.rows[i].signUrl;
              this.signState = res.rows[i].id;
            }
          }
          this.signList = res.rows;
          this.rowState = false;
        });
      }
    },
    // 取消
    cancelDio() {
      this.$emit("refreshSignature");
    },
    // 确定
    subDio() {
      if (!this.serviceOrgStamp) {
        this.$modal.msgWarning("请选择印章");
      } else if (!this.serviceOrgSign) {
        this.$modal.msgWarning("请选择签名");
      } else {
        if (this.serviceOrgStamp) {
          this.dataForm.serviceOrgStamp = this.serviceOrgStamp;
        }
        if (this.serviceOrgSign) {
          this.dataForm.serviceOrgSign = this.serviceOrgSign;
        }
        this.$nextTick(() => {
          this.$emit("refreshSignature", true, this.dataForm);
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.ellipsisList {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  /* 控制最多显示3行文字 */
  overflow: hidden;
  text-overflow: ellipsis;
  width: 80px;
  text-align: center;
}

.hinAllSty {
  width: 100%;
  min-height: 5rem;
  background: #fff;
  display: flex;
  border-radius: 0.5rem;
  overflow-x: auto;
  align-items: center;
}

.signAllSty {
  width: 100%;
  min-height: 15rem;
  background: #fff;
  display: flex;
  border-radius: 0.5rem;
  overflow-x: auto;
  align-items: center;

  .signStyAll {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 1rem 0.5rem;
  }
}

.hinStyAll {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1rem 0.5rem;
  border-radius: 4px;
  border: 1px solid transparent;
}

.activeHinSty {
  border: 1px solid rgb(90, 156, 248);
}

.hintSty {
  width: 100%;
  height: 3rem;
  text-align: center;
  line-height: 3rem;
  color: darkorange;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  margin: 0.5rem 0;
  border-radius: 0.5rem;
}

.qrCodeSty {
  width: 90%;
  height: 18rem;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
